covid-19
Coronavirus Medical Prevention Template
- Created: 23/03/2020
- Latest Update: 23/03/2020
- by: CodexCoder
- email: support@codexcoder.com
Installation
Follow the steps below to get started with covid-19 Multipurpose HTML Template :
-
Open the
Package/covid-19Folder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
-
Make sure you have upload the required files and folders listed below:
-
covid-19 HTML/assets- Stylesheets, JavaScript, Fonts etc Folder -
covid-19 HTML/assets/images- Images Folder -
covid-19 HTML/index.html- Index File/Homepage
-
- You're now ready to go..! Start adding your Content and show off your Brand New Website.
Features At A Glance
- HTML5 & CSS3 & jQuery
- Modern And Creative Design
- Universal menu
- 100% Responsive
- Well documented
- Complete SASS files
- Bootstrap 4.3.1
- Icofont Used
- Google Font Used
- Lightcase Used
- Google Map
- Eye Catching Design
- W3C Valid Code
HTML Structure
covid-19 has follows a simple coding structure. here is the sample:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- google fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet"> <link rel="shortcut icon" type="image/x-icon" href="assets/images/x-icon/01.png"> <link rel="stylesheet" href="assets/css/animate.css"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/icofont.min.css"> <link rel="stylesheet" href="assets/css/lightcase.css"> <link rel="stylesheet" href="assets/css/swiper.min.css"> <link rel="stylesheet" href="assets/css/style.css"> <title>Covid-19</title> </head> <body> <!-- Mobile Menu Start Here --> <div class="mobile-menu seo-bg"> <nav class="mobile-header"> <div class="header-logo"> <a href="index.html"><img src="assets/images/logo/01.png" alt="logo"></a> </div> <div class="header-bar"> <span></span> <span></span> <span></span> </div> </nav> <nav class="mobile-menu"> <div class="mobile-menu-area"> <div class="mobile-menu-area-inner"> <ul class="lab-ul"> <li class="active"><a href="#">Home</a> <ul class="lab-ul"> <li class="active"><a href="index.html">Home Style One</a></li> <li><a href="index-2.html">Home Style Two</a></li> </ul> </li> <li><a href="#">Pages</a> <ul class="lab-ul"> <li> <a href="#0">About Page</a> <ul class="lab-ul"> <li><a href="about.html">About Style 1</a></li> <li><a href="about-2.html">About Style 2</a></li> </ul> </li> <li><a href="outbreak.html">Outbreak</a></li> <li><a href="coming-soon.html">ComingSoon</a></li> <li><a href="404.html">404 Page</a></li> </ul> </li> <li><a href="service.html">Prevention</a></li> <li><a href="#">Blog</a> <ul class="lab-ul"> <li><a href="blog.html">Blog Style 1</a></li> <li><a href="blog-2.html">Blog Style 2</a></li> <li><a href="blog-3.html">Blog Style 3</a></li> <li><a href="blog-single.html">Blog Single</a></li> </ul> </li> <div class="footer-item"> <div class="footer-inner"> <div class="footer-content"> <div class="title"> <h6>Privacy And Tos</h6> </div> <div class="content"> <ul class="lab-ul"> <li><a href="#"><i class="icofont-caret-right"></i>Advertiser Agreement</a></li> <li><a href="#"><i class="icofont-caret-right"></i>Acceptable Use Policy</a></li> <li><a href="#"><i class="icofont-caret-right"></i>Privacy Policy</a></li> <li><a href="#"><i class="icofont-caret-right"></i>Technology Privacy</a></li> <li><a href="#"><i class="icofont-caret-right"></i>Developer Agreement</a></li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="section-wrapper"> <p>© 2020 All Rights Reserved. Designed by <a href="https://themeforest.net/user/codexcoder">CodexCoder</a></p> </div> </div> </div> </footer> <!-- Footer Section Ending Here --> <!-- scrollToTop start here --> <a href="#" class="scrollToTop"><i class="icofont-swoosh-up"></i><span class="pluse_1"></span><span class="pluse_2"></span></a> <!-- scrollToTop ending here --> <script src="assets/js/jquery.js"></script> <script src="assets/js/waypoints.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="assets/js/lightcase.js"></script> <script src="assets/js/isotope.pkgd.min.js"></script> <script src="assets/js/swiper.min.js"></script> <script src="assets/js/jquery.countdown.min.js"></script> <script src="assets/js/functions.js"></script> </body> </html>
CSS Structure
We are using several CSS files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
- Animate css used
- Bootstrap css used
- Lightcase used
- Swiper used
- Icofont used
- Style.css used
- and some other necessary css files
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
/*! Template Name: covid-19 Template URI: https://themeforest.net/user/codexcoder Author: codexcoder.com Author URI: https://themeforest.net/user/codexcoder Description: Description Version: 1.0.0 Text Domain: covid-19 Tags: clinic, corona, coronavirus, Coronavirus disease, coronavirus prevention, covid, covid-19, covid-19 advises, COVID-19 template, doctors, hospital, medical, medical advises, ncov-2019, responsive */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Normalize # Typography # Global CSS # Header CSS *Style-1 *Style-2 *Mobile Header # Page Header # Banner *Style-1 *Style-2 # Service # Corona-Count # Team # Safe-Actions # About *Style-1 *Style-2 # Blog *Style-1 *Style-2 *Style-3 *Blog Single # Blog Widget # Sponsor # FAQ # Contact Us # Fore Zero Page --------------------------------------------------------------*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; background: #fff; } @media (max-width: 991px) { body { margin-top: 72px; } } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ body, button, input, select, optgroup, textarea { color: #696969; font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.5; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a h1, a h2, a h3, a h4, a h5, a h6 { clear: both; font-weight: 700; line-height: 1.4; font-family: "Roboto", sans-serif; color: #000000; } --------------------------------------------------------------*/
/* @@@@@@@@@@@@@ Header Section Start Here @@@@@@@@@@@@@@ */ .section-header { text-align: center; margin-bottom: 30px; } @media (min-width: 992px) { .section-header { max-width: 70%; margin: 0 auto 60px; } } @media (min-width: 1200px) { .section-header { max-width: 63%; } } .section-header h2 { margin-bottom: 15px; margin-top: -10px; } @media (min-width: 992px) { .section-header h2 { margin-bottom: 20px; } } /* @@@@@@@@@@@@@ lab Item Start Here @@@@@@@@@@@@@@ */ .service-item .service-inner { margin: 15px 0; padding: 20px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } @media (min-width: 768px) { .service-item .service-inner { margin: 15px; padding: 30px; } } .service-item .service-inner .service-thumb { margin-bottom: 20px; } .service-item .service-inner .service-thumb img { width: 93px; height: 93px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .service-item .service-inner .service-content h4 { margin-bottom: 5px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } @media (min-width: 992px) { .service-item .service-inner .service-content h4 { margin-bottom: 15px; } } .service-item .service-inner .service-content p { margin-bottom: 0; } .corona-item { padding: 15px; } .corona-item .corona-inner { align-items: center; } .corona-item .corona-inner .corona-thumb img { width: 70px; height: 70px; } .corona-item .corona-inner .corona-content { margin-left: 15px; } .corona-item .corona-inner .corona-content h3 { margin-bottom: 0; } @media (min-width: 576px) { .corona-item .corona-inner .corona-content h3 { line-height: 36px; } } .corona-item .corona-inner .corona-content p { margin-bottom: 0; } .post-item .post-item-inner { box-shadow: 0 0 8px rgba(136, 136, 136, 0.08); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .post-item .post-item-inner .post-thumb a { display: block; } .post-item .post-item-inner .post-thumb a img { width: 100%; } .post-item .post-item-inner .post-content { padding: 30px 20px; background: #fff; } .post-item .post-item-inner .post-content h6 { margin-bottom: 0; } .post-item .post-item-inner .post-content .entry-meta .date { font-size: 16px; color: #696969; display: inline-block; } .post-item .post-item-inner .post-content .author-date { justify-content: flex-start; align-items: center; margin: 10px 0 15px; }
Js Structure
We are using several Js files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
Js Fiile Included
- jquery.js used
- jquery.counterup.min.js used
- jquery.easing.js used
- lightcase.js used
- jquery.countdown.js used
- waypoints.min.js used
- bootstrap.min.js used
- isotope.pkgd.min.js used
- wow.min.js used
- swiper.min.js used
- functions.js used
- and some other necessary css files
functions.js situated on assets/css/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :
(function($){ "use strict"; $(document).ready(function() { // lightcase $('a[data-rel^=lightcase]').lightcase(); // Header Section Menu Part $("ul li ul").parent("li").addClass("menu-item-has-children"); // drop down menu width overflow problem fix $('ul').parent().on('hover', function() { var menu = $(this).find("ul"); var menupos = $(menu).offset(); if (menupos.left + menu.width() > $(window).width()) { var newpos = -$(menu).width(); menu.css({ left: newpos }); } }); // mobile menu responsive $(document).on('click','.header-bar',function(){ $(".header-bar").toggleClass("close"); $(".mobile-menu").toggleClass("open"); }); //mobile drodown menu display $('.menu-item-has-children>a').on('click', function(e){ event.preventDefault(); }); $('.mobile-menu-area ul li a, .shop-menu li a').on('click', function(e) { var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(1000,"swing"); } else { element.addClass('open'); element.children('ul').slideDown(1000,"swing"); element.siblings('li').children('ul').slideUp(1000,"swing"); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(1000,"swing"); } });